<!DOCTYPE html>
<html th:fragment="layout (title, headTitle,content,links,scripts)" xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:replace="${title}">Layout Title</title>
    <link rel="stylesheet" th:href="@{/css/elementUI.css}">
    <link th:href="@{/css/layout.css}" rel="stylesheet">
    <!--  内容占位符，有内容也的link标签填充-->
    <th:block th:replace="${links}"/>
</head>
<body>
    <div class="container-fluid">
        <div id="header">
            <h1>机房巡检记录系统</h1>
            <!--公共的头部页面-->
            <div th:replace="${headTitle}">

            </div>
            <div class="userInfo">
                <a href="/yyds/login">注销</a>
            </div>
        </div>
        <div id="borderMain">
            <div id="borderLeft">
                <div class="myMenu">
                    <el-menu class="leftMenu" :unique-opened="menuBool">
                        <el-submenu index="1">
                            <template slot="title">
                                主页
                            </template>
                            <el-menu-item @click="goUrl('index')">
                                回到主页
                            </el-menu-item>
                        </el-submenu>
                        <el-submenu v-for="menu in items" :index="menu.id">
                            <template slot="title">
                                {{menu.name}}
                            </template>
                            <template v-for="child in menu.children" :index="child.id" style="width: 50%">
                                <!--这里用一个点击事件，把url传递过去，不要用a标签-->
                                <el-menu-item :index="child.path" @click="goUrl(child.path)">
                                    {{child.name}}
                                </el-menu-item>
                            </template>
                        </el-submenu>
                    </el-menu>
                </div>
            </div>
            <div id="borderContent">
                <div th:replace="${content}">
                    公共的页面，导入其他的页面
                </div>
            </div>
        </div>
    </div>
<!--公共的js样式-->
<script th:src="@{/js/jquery-1.12.4.js}" type="text/javascript"></script>
<script th:src="@{/js/vue.js}" type="text/javascript"></script>
<script th:src="@{/js/elementUi.js}" type="text/javascript"></script>
<script th:src="@{/js/axioc.js}" type="text/javascript"></script>
<script>
    let myVue = new Vue({
        el: '#borderLeft',
        //钩子函数
        created() {
            //获取到菜单
            axios.post("/yyds/getMenuList").then(resp=>{
                console.log(resp.data.map);
                this.items = resp.data.map.items;
            });
        },
        data:{
            items:[
                {
                    "id": "11953540713231231231",
                    "name": "主页",
                    "path": "/1",
                    "icon": null,
                    "status": null,
                    "children": [
                        {
                            "id": "1312312132131321321",
                            "name": "主页统计",
                            "path": "/index",
                            "icon": null,
                            "status": null,
                            "children": []
                        }]
                },
            ],
            menuBool:true,
        },
        methods: {
            goUrl:function (url){
                window.location.href = "/yyds/"+url;
            }
        }
    })
</script>
<th:block th:replace="${scripts}"/>
</body>
</html>